// import { Component, Input, Output, EventEmitter } from '@angular/core';
// import { CommonModule } from '@angular/common';
// import { DroppableDirective } from '../../directives/droppable.directive';
// import { WidgetComponent, DraggableItem, LayoutContainer } from '../../models/layout.models';
// import { WidgetHostComponent } from '../widgets/widget-host.component';
//
// @Component({
//   selector: 'app-two-columns-container',
//   standalone: true,
//   imports: [CommonModule, DroppableDirective, WidgetHostComponent],
//   template: `
//     <div class="layout-container two-columns"
//          [appDroppable]="this"
//          (itemDropped)="onItemDropped($event)">
//       <div class="layout-header">
//         <div class="layout-title">
//           <i class="material-icons">view_day</i>
//           {{containerData?.title || '双列布局'}}
//         </div>
//         <div class="layout-actions">
//           <button (click)="onSettings()"><i class="material-icons">settings</i></button>
//           <button (click)="onDelete()"><i class="material-icons">delete</i></button>
//         </div>
//       </div>
//       <div class="layout-content two-columns-content">
//         <div class="column"
//              [appDroppable]="this"
//              (itemDropped)="onItemDropped($event)">
//           <app-widget-host
//             *ngFor="let widget of leftColumnWidgets"
//             [widget]="widget"
//             (delete)="onWidgetDelete(widget.id, 'left')">
//           </app-widget-host>
//           <div *ngIf="leftColumnWidgets.length === 0" class="empty-column">
//             拖拽组件到左侧
//           </div>
//         </div>
//         <div class="column"
//              [appDroppable]="this"
//              (itemDropped)="onItemDropped($event)">
//           <app-widget-host
//             *ngFor="let widget of rightColumnWidgets"
//             [widget]="widget"
//             (delete)="onWidgetDelete(widget.id, 'right')">
//           </app-widget-host>
//           <div *ngIf="rightColumnWidgets.length === 0" class="empty-column">
//             拖拽组件到右侧
//           </div>
//         </div>
//       </div>
//     </div>
//   `,
//   styleUrls: ['./two-columns.component.scss']
// })
// export class TwoColumnsContainerComponent {
//   @Input() id!: string;
//   @Input() containerData?: LayoutContainer; // 添加 containerData 输入属性
//   @Output() delete = new EventEmitter<string>();
//
//   leftColumnWidgets: WidgetComponent[] = [];
//   rightColumnWidgets: WidgetComponent[] = [];
//
//   onItemDropped(event: any) {
//     if (event.item.type === 'widget' && event.item.widgetType) {
//       // 简化处理：默认放到左侧
//       this.addWidget({
//         id: event.item.id,
//         type: event.item.widgetType,
//         title: this.getWidgetTitle(event.item.widgetType)
//       }, 'left');
//     }
//   }
//
//   addWidget(widget: WidgetComponent, column: 'left' | 'right') {
//     if (column === 'left') {
//       this.leftColumnWidgets.push(widget);
//     } else {
//       this.rightColumnWidgets.push(widget);
//     }
//   }
//
//   onWidgetDelete(widgetId: string, column: 'left' | 'right') {
//     if (column === 'left') {
//       this.leftColumnWidgets = this.leftColumnWidgets.filter(w => w.id !== widgetId);
//     } else {
//       this.rightColumnWidgets = this.rightColumnWidgets.filter(w => w.id !== widgetId);
//     }
//   }
//
//   onSettings() {
//     console.log('Settings clicked for container:', this.id);
//   }
//
//   onDelete() {
//     this.delete.emit(this.id);
//   }
//
//   private getWidgetTitle(type: string): string {
//     const titles: Record<string, string> = {
//       'table': '数据表格',
//       'view': '数据视图',
//       'bar-chart': '柱形图',
//       'line-chart': '折线图'
//     };
//     return titles[type] || '未知组件';
//   }
// }
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
import { DroppableDirective } from '../../directives/droppable.directive';
import { WidgetComponent, LayoutContainer } from '../../models/layout.models';
import { WidgetHostComponent } from '../widgets/widget-host.component';

@Component({
  selector: 'app-two-columns-container',
  standalone: true,
  imports: [CommonModule, CdkDropList, CdkDrag, DroppableDirective, WidgetHostComponent],
  template: `
    <div class="layout-container two-columns">
      <div class="layout-header">
        <div class="layout-title">
          <i class="material-icons">view_day</i>
          {{containerData?.title || '双列布局'}}
        </div>
        <div class="layout-actions">
          <button (click)="onSettings()"><i class="material-icons">settings</i></button>
          <button (click)="onDelete()"><i class="material-icons">delete</i></button>
        </div>
      </div>
      <div class="layout-content two-columns-content">
        <div
          class="column"
          cdkDropList
          [cdkDropListData]="leftColumnWidgets"
          (cdkDropListDropped)="onLeftColumnDrop($event)"
          [appDroppable]="{ column: 'left' }"
          (itemDropped)="onItemDropped($event, 'left')">

          <div *ngFor="let widget of leftColumnWidgets" cdkDrag class="widget-drag-item">
            <app-widget-host
              [widget]="widget"
              (delete)="onWidgetDelete(widget.id, 'left')">
            </app-widget-host>
          </div>

          <div *ngIf="leftColumnWidgets.length === 0" class="empty-column">
            <i class="material-icons">add_circle_outline</i>
            <span>左侧列</span>
          </div>
        </div>

        <div
          class="column"
          cdkDropList
          [cdkDropListData]="rightColumnWidgets"
          (cdkDropListDropped)="onRightColumnDrop($event)"
          [appDroppable]="{ column: 'right' }"
          (itemDropped)="onItemDropped($event, 'right')">

          <div *ngFor="let widget of rightColumnWidgets" cdkDrag class="widget-drag-item">
            <app-widget-host
              [widget]="widget"
              (delete)="onWidgetDelete(widget.id, 'right')">
            </app-widget-host>
          </div>

          <div *ngIf="rightColumnWidgets.length === 0" class="empty-column">
            <i class="material-icons">add_circle_outline</i>
            <span>右侧列</span>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./two-columns.component.scss']
})
export class TwoColumnsContainerComponent {
  @Input() id!: string;
  @Input() containerData?: LayoutContainer;
  @Output() delete = new EventEmitter<string>();

  leftColumnWidgets: WidgetComponent[] = [];
  rightColumnWidgets: WidgetComponent[] = [];

  onItemDropped(event: any, column: 'left' | 'right') {
    if (event.item.type === 'widget' && event.item.widgetType) {
      this.addWidget({
        id: event.item.id,
        type: event.item.widgetType,
        title: this.getWidgetTitle(event.item.widgetType)
      }, column);
    }
  }

  onLeftColumnDrop(event: any) {
    console.log('Left column widget reordered:', event);
  }

  onRightColumnDrop(event: any) {
    console.log('Right column widget reordered:', event);
  }

  addWidget(widget: WidgetComponent, column: 'left' | 'right') {
    if (column === 'left') {
      this.leftColumnWidgets.push(widget);
    } else {
      this.rightColumnWidgets.push(widget);
    }
  }

  onWidgetDelete(widgetId: string, column: 'left' | 'right') {
    if (column === 'left') {
      this.leftColumnWidgets = this.leftColumnWidgets.filter(w => w.id !== widgetId);
    } else {
      this.rightColumnWidgets = this.rightColumnWidgets.filter(w => w.id !== widgetId);
    }
  }

  onSettings() {
    console.log('Settings clicked for container:', this.id);
  }

  onDelete() {
    this.delete.emit(this.id);
  }

  private getWidgetTitle(type: string): string {
    const titles: Record<string, string> = {
      'table': '数据表格',
      'view': '数据视图',
      'bar-chart': '柱形图',
      'line-chart': '折线图'
    };
    return titles[type] || '未知组件';
  }
}
